<template>
<div>
  <div class="info">
    <div style="align-items: center; display: flex;">倒计时：{{countdown.time}} 秒</div>
    <div>得分：{{statistics.score}} / {{statistics.count}}</div>
  </div>
  <div class="question">{{label}}<input type="text" readonly v-model="userrs"/></div>
  <div>{{rstip}}</div>
  <van-number-keyboard
    :show="true"
    theme="custom"
    extra-key="."
    close-button-text="完成"
    @input="onInput"
    @delete="onDelete"
    @close="onSubmit"
    :hide-on-click-outside="false"
  />
</div>
  
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  props: ['base'],
  computed:{
    ...mapState({
      statistics: state => state.statistics,
      countdown: state => state.countdown
    }),
    label(){
      return this.number1 + '  ' + this.symbol + ' ' + this.number2  + '  ' + '='
    }
  },
  data(){
    return {
      checked: true,
      number1 : null,    // 第一个处理的数字       2
      symbol : null,     // 符号                 +
      number2 : null,    // 第二个处理的数字       3 = 
      result: null,      // 结果                 5 
      userrs : '',
      rstip: '',
    }
  },
  created(){
    this.init()
    window.addEventListener('keydown', this.keydown)
    this.RESET()
    this.down()
  },
  
  methods:{
    down(){
      const vm = this
      setTimeout(function(){
        if(vm.countdown.time > 0){
          vm.down()
          vm.COUNTDOWN(vm.countdown.time)
        } else {
          vm.$router.push({
            path: 'end'
          })
        }
      }, 1000)
    },
    keydown(e){ //监听键盘
      let num = ''
      switch(e.keyCode){
        case 48 : this.onInput('0'); break;
        case 49 : this.onInput('1'); break;
        case 50 : this.onInput('2'); break;
        case 51 : this.onInput('3'); break;
        case 52 : this.onInput('4'); break;
        case 53 : this.onInput('5'); break;
        case 54 : this.onInput('6'); break;
        case 55 : this.onInput('7'); break;
        case 56 : this.onInput('8'); break;
        case 57 : this.onInput('9'); break;
        case 8 : this.onDelete(); break;
        case 13 : this.onSubmit(); break;
      }
    },
    ...mapMutations([
      'COUNTDOWN', 'COUNT', 'SCORE', 'LOGERROR', 'RESET'
    ]),
    init(){
      this.number1 = null
      this.symbol = null
      this.number2 = null
      this.result = null
      this.userrs = ''
      this.rstip = ''
      this.initsymbol()
    },
    initsymbol(){
      const symbolary = [true, false];
      let symbol = symbolary[Math.floor(Math.random() * 2)];
      this.symbol = symbol ? '+' : '-'
      this.initNumber(symbol)
    },
    initNumber(symbol){
      if(symbol){
        this.result = parseInt(Math.random() * this.base)
        this.number1 = parseInt(Math.random() * this.result)
        this.number2 = this.result - this.number1
      } else {
        this.number1 = parseInt(Math.random() * this.base)
        this.number2 = parseInt(Math.random() * this.number1)
        this.result = this.number1 - this.number2
      }
    },
    onInput(e){
      this.userrs = this.userrs + e
    },
    onDelete(){
      this.userrs = this.userrs.substr(0, this.userrs.length - 1);  
    },
    onSubmit(){
      if(this.userrs != ''){
        this.COUNT()
        if(parseInt(this.userrs) == this.result){
          this.SCORE()
        } else {
          let item = {
            ask: this.label + ' ' + this.result,
            answer: this.userrs
          }
          this.LOGERROR(item)
          const errortiplist = [
            '做题别走神，仔细点噢',
            '又错了',
            '仔细点哦',
            '老爸要打屁股了',
            '题目好简单！但是...',
            '妈妈会骂的哟~',
            '这样不好啊'
          ]
          this.$toast({
            position: 'bottom',
            message:  errortiplist[Math.round(Math.random()*(errortiplist.length-1))]
          });
        }
        this.init()
      }
    },
    end(){
      this.push({
        path: 'end'
      })
    }
  },
}
</script>
<style>
  .info{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 60px;
    align-items: center;
  }
  .question{
    margin-top: 80px;
    font-size: 41px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .question input{
    display: inline;
    width: 60px;
    border: 1px solid #ebedf0;
    margin-left: 20px;
    text-align: center;
    color: #1989fa;
  }
</style>
